<template>
  <div class="main">
    <NavMenu></NavMenu>
    <!-- 一楼轮播图 -->
    <div class="of">
      <el-carousel 
      :interval="3000" 
      arrow="always" 
      height="620px"
      trigger="click"
      >
        <el-carousel-item v-for="item in animals" :key="item.id">
          <img :src="item.src" alt="" />
          <div class="xfk">
            <p>{{ item.name }}</p>
          </div>
          
        </el-carousel-item>
      </el-carousel>

      <img class="i" src="https://www.hzsp.com/images/repeat/bor1.png" alt="" />
    </div>

    <!-- 二楼演出 -->
    <div class="tf">
      <div class="center">
        <div class="fenlei">
          
        </div>

        <div class="yanchu" id="jcyc">
          <img src="https://www.hzsp.com/images/i1.png" alt="" />
          <p @click="goToAnchor('#jcyc')">精彩演出</p>
          <img src="https://www.hzsp.com/images/i2.png" alt="" />
          <p @click="goToAnchor('#qzly')">亲子乐园</p>
        </div>
        <div class="xhj">
          <div @click="skip(v.pid)" class="card" v-for="v in data" :key="v.pid">
            <div class="img">
              <img :src="url + v.src" alt="" />
            </div>
            <div class="text">
              <p id="p">{{ v.title }}</p>
              <span class="t">{{ v.text }}</span>
              <span class="a"> {{ v.address }}</span>
            </div>
          </div>
        </div>

        <div class="yanchu" id="qzly">
          <img src="https://www.hzsp.com/images/i1.png" alt="" />
          <p class="er" @click="goToAnchor('#jcyc')">精彩演出</p>
          <img src="https://www.hzsp.com/images/i2.png" alt="" />
          <p class="lou" @click="goToAnchor('#qzly')">亲子乐园</p>
        </div>
        <div class="xhj">
          <div
            @click="skip2(v.pid)"
            class="card"
            v-for="v in data2"
            :key="v.pid"
          >
            <div class="img">
              <img :src="url + v.src" alt="" />
            </div>
            <div class="text">
              <p id="p">{{ v.title }}</p>
              <span class="t">{{ v.text }}</span>
              <span class="a"> {{ v.address }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="of">
      <img class="i" src="https://www.hzsp.com/images/repeat/bor2.png" alt="" />
    </div>
    <!-- 绿色购票卡片 -->
    <Food></Food>
    <!-- 底部 -->
    <Bot></Bot>
  </div>
</template>

<script>
import NavMenu from "../components/NavMenu.vue";
import Bot from "@/components/index/Bot.vue";
import Food from "@/components/index/Food.vue";
export default {
  components: { NavMenu, Bot, Food },
  mounted() {
    this.axios.get("/v1/content/playQuery").then((res) => {
      console.log(res);
      this.data = res.data.data;
    });
    this.axios.get("/v1/content/play2Query").then((res) => {
      console.log(res);
      this.data2 = res.data.data;
    });
  },
  data() {
    return {
      animals: [
        {
          id: "01",
          name: "中华国宝区",
          src: "https://adm.hzsp.com/uploads/20191116/9d06c2a56156ea7c1aa15d9174f92787.jpg",
        },
        {
          id: "02",
          name: "掠食险境",
          src: "https://adm.hzsp.com/uploads/20191116/042b2806811a186c7e0825b23bf57327.jpg",
        },
        {
          id: "03",
          name: "黑猩猩",
          src: "https://adm.hzsp.com/uploads/20191116/9d06c2a56156ea7c1aa15d9174f92787.jpg",
        },
        {
          id: "04",
          name: "斑马",
          src: "https://adm.hzsp.com/uploads/20191116/48cc7d9aef57dd2f6a5880ee2519084c.jpg",
        },
        {
          id: "05",
          name: "非洲象",
          src: "https://adm.hzsp.com/uploads/20220811/2f24b7b17b1ed1eacb7c485beb0b878b.jpg",
        },
      ],
      data: {},
      data2: {},
      // count:0,
      url: "http://176.19.26.136:3000/",
    };
  },
  methods: {
    skip2(pid, e) {
      let id = this.data2[pid - 1].pid;
      this.$router.push(`/rizDetails/${id}`);
    },
    skip(pid, e) {
      let id = this.data[pid - 1].pid;
      this.$router.push(`/showDetails/${id}`);
      console.log(id);
    },
    goToAnchor(selector) {
      this.$el.querySelector(selector).scrollIntoView({
        behavior: "smooth", // 平滑过渡
        block: "start", // 上边框与视窗顶部平齐
      });
    },
  },
};
</script>
<style scoped src="../assets/css/animalParadise.css"></style>

<style lang="scss">
.main {
  overflow-x: hidden;
}
</style>
